
<template>
	<view class="content">
		<!-- <view class="login_img"><image mode="aspectFill" src="/static/image/iamhe.png"></image></view> -->
		<view class="login_from">
			
			<view class="login_from_input">
				<view class="login_from_name">用户名</view>
				<view class="login_from_fun"><input type="text" v-model="name" placeholder="请输入用户名"></view>
			</view>
			
			<view class="login_from_input">
				<view class="login_from_name">邮箱</view>
				<view class="login_from_fun"><input type="text" v-model="email" placeholder="请输入邮箱"></view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">密码</view>
				<view class="login_from_fun"><input type="digit" v-model="password" password="true" placeholder="请输入登录密码"></view>
			</view>
			
			<view class="login_from_input">
				<view class="login_from_name">确认</view>
				<view class="login_from_fun"><input type="digit" v-model="confirmPassword" password="true" placeholder="请输入确认密码"></view>
			</view>
			

			
			<view class="login_from_input">
				<view class="login_from_name">验证码</view>
				<view class="login_from_fun">
					<input style="width: 40%; text-align: left" type="digit" v-model="sms" maxlength="6" placeholder="验证码">
					<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#2ebbfe'}" @click="Qzyzm">{{Qztime}}{{Qztext}}</label>
				</view>
			</view>


			

			
			<view class="login_from_dl">
				<button @click="denglu">注册</button>
			</view>
			
			<view class="logo_xieyi">
				<label @click="moutcl" :class="gouxSta?'cuIcon-squarecheckfill':'cuIcon-square'"></label>
				<view class="logo_text">请勾选并阅读<text>《注册协议》</text>及<text>《隐私协议》</text></view>
			</view>
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" @confirm="backTologin" confirmText="确认" title="提示信息" :content="messageText"></uni-popup-dialog>
			</uni-popup>
		</view>
		
	</view>
</template>
<script>
	
	



   export default {

   data(){
		return {
		// 地区选择 start 
			//value3: [],
			//label3: '',
			//list1: areaData,
		// 地区选择 end 
		name:"",
		password:"",
		email:"",
		sms:"",
		confirmPassword:"",
		gouxSta:false,
		Qztime:'',
		QzyzmStare:false,
		Qztext:'获取验证码',
		msgType:"",
		messageText:""
		}
	},
    onLoad(){
    },
    methods: {
		
		moutcl(){
			if( this.gouxSta == false){
				this.gouxSta = true
			}else{
				this.gouxSta = false
			}
		},
		backTologin(){
			if(this.messageText == "注册成功"){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			}
		},
		showError(msg){
			this.msgType = "error";
			this.messageText = msg;
			this.$refs.alertDialog.open()
		},
		showSuccess(msg){
			this.msgType = "success";
			this.messageText = msg;
			this.$refs.alertDialog.open()
		},
		denglu(){
			if( this.gouxSta == false){
				this.showError("请阅读并勾选用户协议");
			}else if(this.password!=this.confirmPassword){
				this.showError("密码不一致");
			}
			else{
				uni.request({
					url:"http://localhost:8080/user/register",
					method:'POST',
					data:{
						name: this.$encryptByPublicKey(this.name),
						password: this.$encryptByPublicKey(this.password),
						sms: this.$encryptByPublicKey(this.sms)
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded' //请求头信息
					},
					success:(res)=>{
						if(res.data!="注册成功"){
							this.showError(res.data)
						}
						else{
							this.showSuccess("注册成功");
						}
					},
					fail:()=> {
						console.log("调用失败")
					}
				})
/* 				uni.showToast({
					"title":"账号不存在",
					"icon":'none'
				}) */
			}		
		},
		
		
		Qzyzm(){
					var num = 60;
					if( this.QzyzmStare == false){
						uni.request({
							url:"http://localhost:8080/user/register/sms",
							method:'POST',
							data:{
								name: this.name,
								email:this.email,
							},
							header:{
								'Content-Type':'application/x-www-form-urlencoded' //请求头信息
							},
							success:(res)=>{
								if(res.data == "用户已存在"){
									this.showError(res.data);
								}
								else{
									this.showSuccess("验证码发送成功");
									this.Qztime ='60';
									this.Qztext = 's后获取';
									this.QzyzmStare = true;
									var interval = setInterval(() =>{
											--this.Qztime
										},1000)
									setTimeout(()=>{
										clearInterval(interval)
										this.Qztext = '获取验证码'
										this.Qztime = ''
										this.QzyzmStare = false
									},60000)	
								}
							},
							fail:()=> {
								console.log("调用接口失败")
							}
						})
						
						
						
					}
				}	
     }
 }
</script>
<style>
	
	page{ background: #fff; }
	
	.login_img{ width: 100%; height: auto; margin-top: 90upx; }
	.login_img image{ width: 170upx; height: 170upx; display: block; margin: 0px auto; border-radius: 50%; }
	
	.login_from{ 
		width: 100%; 
		height: auto; 
		box-sizing: border-box; 
		padding: 20upx 8%; 
	}
	
	.login_from_input{
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 40upx 0px; 
		margin: 0px auto;  
	}
	
	.login_from_name{ width: 20%; }
	.login_from_fun{ 
		width: 80%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		align-items: center;  
	}
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 14px;  
	}
	
	
	.login_from_dl{ 
		width: 100%; 
		height: 50px; 
		line-height: 50px; 
		margin-top: 150upx;   
	}
	.login_from_dl button{ 
		width: 100%; 
		height: 50px; 
		line-height: 50px; 
		background: #77B307; 
		color: #fff; 
		border-radius: 0px; 
	}
	
	.logo_xieyi{ width: 100%; height: 40px; line-height: 40px; display: flex; flex-direction: row; margin-top: 30upx; align-items: center; color: #444; font-size: 14px; justify-content: center; }
	.logo_xieyi label{ font-size: 18px; margin-right: 1%; display: block; width: 15px; height: 15px; }
	
	.cuIcon-squarecheckfill{ color: #FF3B00; }
	.logo_text text{ color: #FF3B00; }
	
	.getyzm{ width: 60%; display: flex; flex-direction: row; justify-content: flex-end; color: #FF3B00; }
	.cuicon{ font-size: 18px; }  
	
	.regFrom_tom_yzlabel{ 
		width: 60%; 
		text-align: right; 
	}
	.cuIcon-squarecheckfill{ background: #FF3B00; position: relative; border: 2px #ccc solid; box-sizing: border-box; border-radius: 3px; }
	.cuIcon-square{ background: #fff; border: 2px #ccc solid; box-sizing: border-box; border-radius: 3px; }
	
</style>



